import React, { useState, useEffect } from 'react'
import { InfiniteScroll, Tabs } from 'antd-mobile'
import utils from './utils/index'

const App = () => {
  const [dataList, setDataList] = useState([])
  const [pageCode, setPageCode] = useState(1)
  const getData = async () => {
    const res = await utils.get("/room/list")
    console.log(res.data.data.list);
    setDataList([...dataList, ...res.data.data.list])
    setPageCode(pageCode + 1)
  }
  useEffect(() => {
    getData()
  }, [])
  return (
    <div>
      <Tabs>
        <Tabs.Tab title='机票' key='fruits'>
          <div>
            {
              dataList && dataList.map((v, i) => {
                return <dl key={i}>
                  <dt>
                    <img src={v.url} alt='' />
                  </dt>
                  <dd>
                    <span>{v.name}</span>
                    <span>{v.title}</span>
                  </dd>
                </dl>
              })
            }
          </div>
          <InfiniteScroll loadMore={getData} hasMore={true} />
        </Tabs.Tab>
        <Tabs.Tab title='汽车票' key='vegetables'>
          汽车票
        </Tabs.Tab>
        <Tabs.Tab title='火车票' key='animals'>
          火车票
        </Tabs.Tab>
      </Tabs>
    </div>
  )
}

export default App
